<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" icon="plus" style="width: 120px"  @click="add">添加激活码</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="keyData" style="width: 100%" v-loading="listLoading" element-loading-text="玩命请求中。。。">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="key" label="key" width="300" :formatter="changeKey">
      </el-table-column>
      <el-table-column prop="uid" label="用户id" width="140">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="140" :formatter="changeType">
      </el-table-column>
      <el-table-column prop="bind" label="标识号" width="140">
      </el-table-column>
      <el-table-column prop="expire_time" label="到期时间" width="200">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="update_time" label="修改时间" width="200">
      </el-table-column>
      <el-table-column label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="deleteCdkey(scope.row.key)" v-if="scope.row.uid === '0'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增激活码-->
    <el-dialog title="新增激活码" v-model="addShow" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" ref="addForm">

        <el-form-item label="类型" prop="type">
          <template slot-scope="scope">
            <el-select v-model="addForm.type" placeholder="请选择">
              <el-option v-for="(item, index) in typeMaps" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="过期时间">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-date-picker v-model="addForm.expire_time" type="datetime" placeholder="选择日期时间" @change=""></el-date-picker>
            </div>
            <span style="margin-left: -95px;">例如：2017-07-31 09:45:23</span>
          </template>
        </el-form-item>

        <el-form-item label="资源标识" prop="bind">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addForm.bind" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：56</span>
            <span style="color: red">(* 优惠卷id)</span>
          </template>
        </el-form-item>

        <el-form-item label="生成数量" prop="num">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addForm.num" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：30</span>
          </template>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addShow = false">关闭</el-button>
        <el-button type="primary" @click.native="addCdkey">提交</el-button>
      </div>
    </el-dialog>

    <!--添加成功复制窗口-->
    <el-dialog title="新增激活码" v-model="addSuccessShow">
      <el-form label-width="80px">
        <el-form-item label="生成的key" prop="num">
          <template slot-scope="scope">
            <div style="width: 600px;display: inline-block;">
              <el-input type="textarea" :rows="6" placeholder="生成的cdkey" v-model="cdKey"></el-input>
            </div>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog">关闭</el-button>
      </div>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{ total }} 条数据</span>
    </el-col>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'
  export default {
    name: 'ticket',
    data() {
      return {
        typeMaps: [
          {value: '1', label: '优惠券'},
          {value: '2', label: '无锁优惠券'}
        ],
        addShow: false,
        addSuccessShow: false,
        addForm: {
          type: '',
          bind: '0',
          num: '0',
          expire_time: util.formatDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
        },
        showProduceCdkey: false,
        keyData: [],
        total: 0,
        listLoading: false,
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1
        },
        cdKey: ''
      }
    },
    methods: {
      // 显示类型
      changeType(row) {
        return row.type === '1' ? '优惠券' : '其他'
      },
      // 显示key
      changeKey(row) {
        let len = parseInt(row.key.length);
        let mode = parseInt(len) % 5;
        let r = '-' + row.key.substr(len - mode);
        for (let i = (len - mode) / 5; i > 0; i--) {
          r = '-' + row.key.substr((i - 1) * 5, 5) + r;
        }
        let k = r.substr(1);
        if (k.substr(k.length - 1, 1) === '-') {
          return k.substr(0, k.length -1);
        }
        return k;
      },
      currentPageChange(val) {
        this.selectOptions.page = val;
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      add() {
        this.addShow = true;
        this.addForm.expire_time = util.formatDate.format(new Date(), 'yyyy-MM-dd hh:mm:ss');
      },
      // 新增
      addCdkey() {
        if (util.isEmpty(this.addForm.type)) {
          this.$message.error('选择类型');
          return
        }
        if (util.isEmpty(this.addForm.bind)) {
          this.$message.error('输入自愿标识');
          return
        }
        if (util.isEmpty(this.addForm.num)) {
          this.$message.error('输入次数');
          return
        }
        this.addForm.expire_time = parseInt(new Date(this.addForm.expire_time).getTime()) / 1000;
        apiTree('cdKey/index','coupons/addCdKey',this.addForm, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.cdKey = res.d.keys;
            this.addSuccessShow = true;
          } else {
            this.$message.error(res.err_str);
          }
        });
      },
      closeDialog() {
        this.cdKey = '';
        this.addSuccessShow = false;
        this.addShow = false;
        this.getKeyData();
      },
      // 删除
      deleteCdkey(_key) {
        let para = {key: _key};
        apiTree('cdKey/index','coupons/deleteCdKey',para).then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getKeyData();
          }
        });
      },
      getKeyData() {
        let para = this.$route.query
        if (util.isEmpty(para)) {
          this.selectOptions = {
            page: 1
          }
        }
        this.listLoading = true;
        apiTree('cdKey/index','coupons/keyList',para).then((res) => {
          this.listLoading = false;
          this.keyData = res.d.data;
          this.total = parseInt(res.d.total_num);
        });
      }
    },
    created() {
      this.getKeyData();
    },
    watch: {
      $route: 'getKeyData'
    }
  }
</script>

<style scoped type="text/css" media="screen">

</style>